@import "_util/variables"
@import "_util/mixins"

@font-face
  font-family: font-name
  src: url(font-path)

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  vertical-align: baseline
  // font: inherit
  font-family: sans-serif, font-name
  font-size: 100%

html
  box-sizing: border-box
  font-family: sans-serif
  -ms-text-size-adjust: 100%
  -webkit-text-size-adjust: 100%

body
  font-size: 14px
  line-height: 1

*, *:before, *:after
  box-sizing: inherit

ol, ul
  list-style: none

blockquote, q
  quotes: none

blockquote:before, blockquote:after, q:before, q:after
  content: ""
  content: none

table
  border-spacing: 0
  border-collapse: collapse

img
  max-width: 100%

a
  background-color: transparent
  text-decoration: none
  color: inherit

a:active, a:hover
  outline: 0

b, strong
  font-weight: bold

i, em, dfn
  font-style: italic

.body-container
  position: relative

// desktop >=768
@media screen and (min-width: 768px)
  body
    font-size: 16px

    h1, h2, h3, h4, h5, h6
      line-height: 1.4;
      margin: 5px 0 25px;

    h1
      font-size: 50px;
      
    h2
      font-size: 40px;
      
    h3
      font-size: 30px;
      
    h4
      font-size: 25px;
      
    h5
      font-size: 20px;
      
    h6
      font-size: 16px;

  
  .body-container.float
    margin-top: -(desktop-banner-margin)

// mobile 768<
@media screen and (max-width: 767px)
  body
    font-size: 12px;

    h1, h2, h3, h4, h5, h6
      margin: 3px 0 20px;

    h1
      font-size: 37px;
      
    h2
      font-size: 31px;
      
    h3
      font-size: 25px;
      
    h4
      font-size: 20px;
      
    h5
      font-size: 15px;
      
    h6
      font-size: 12px;

  .body-container.float
    margin-top: -(mobile-banner-margin)

@import "_partial/nav"
@import "_partial/header"
@import "_partial/footer"
@import "_partial/card"
@import "_partial/pagination"
@import "_partial/content"
@import "_partial/page"